﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://raw.githubusercontent.com/ZhengSnow/demo/master/jquery-1.7.1.js"></script>
    <script src="https://raw.githubusercontent.com/ZhengSnow/demo/master/jquery-1.7.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        /* 公用 */
        .hide-menu {
            width: 0;
            height: 800px;
            border: 1px solid #333333;
            background-color: #777788;
            text-align: center;
            line-height: 400%;
            font-size: 13px;
            left: 0;
            top: 100px;
            float: left;
            display: none;
        }

        .ctrl-btn {
            border: 1px solid;
            float: left;
            padding: 10px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu-1').menuToggle({
                'ctrlBtn': 'ctrl-btn-1',
                'speed': 400,
                'width': 200,
                'height': 800,
            });
        });
        //扩展事件
        (function ($) {
            $.fn.extend({
                'menuToggle':
                    function (options) {
                        //self变量，用于函数内部调用插件参数
                        var self = this;
                        //默认参数
                        this._default = {
                            'ctrlBtn': null,            //关闭&展开按钮id
                            'speed': 400,            //展开速度
                            'width': 200,            //展开菜单宽度
                            'height': 800,            //展开菜单高度
                            'openText': '展开>>',    //展开前文本
                            'closeText': '<<关闭',    //展开后文本
                            'type': 'width'            //width表示按宽度伸展，height表示按高度伸展
                        };
                        //插件初始化函数
                        this.init = function (options) {
                            //配置参数格式有误则提示并返回
                            if (typeof options != 'object') {
                                self.error('Options is not object Error!');
                                return false;
                            }
                            if (typeof options.ctrlBtn == 'undefined') {
                                self.error('Options ctrlBtn should not be empty!');
                                return false;
                            }
                            //存储自定义参数
                            self._default.ctrlBtn = options.ctrlBtn;
                            if (typeof options.type != 'undefined') self._default.type = options.type;
                            if (typeof options.width != 'undefined') self._default.width = options.width;
                            if (typeof options.height != 'undefined') self._default.height = options.height;
                            if (typeof options.speed != 'undefined') self._default.speed = options.speed;
                            if (typeof options.openText != 'undefined') self._default.openText = options.openText;
                            if (typeof options.closeText != 'undefined') self._default.closeText = options.closeText;
                            if (self._default.type == 'width') {
                                self._default.expandOpen = { width: self._default.width };
                                self._default.expandClose = { width: 0 };
                            } else {
                                self._default.expandOpen = { height: self._default.height };
                                self._default.expandClose = { height: 0 };
                            }
                        };
                        this.run = function () {
                            //给按钮加事件，并检测是否展开。
                            $("#" + self._default.ctrlBtn).click(function () {
                                if ($(this).hasClass('closed')) {        //有closed类，表示已关闭，现在展开
                                    $(this).removeClass('closed').html(self._default.closeText);
                                    $(self).show().animate(self._default.expandOpen, self._default.speed);
                                } else {
                                    $(this).addClass('closed').html(self._default.openText);
                                    $(self).animate(self._default.expandClose, self._default.speed, function () {
                                        $(this).hide();
                                    });
                                }
                            });
                        };
                        this.error = function (msg) {
                            //没有错误提示DIV则自动添加
                            if (!$("#menuToggleErrorTips").size()) {
                                $("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide();
                                $("#menuToggleErrorTips").css({
                                    position: 'absolute',
                                    left: $("body").width() / 3,
                                    top: 100,
                                    width: 400,
                                    height: 200,
                                    'z-index': 9999999,
                                    'border': '1px solid #000',
                                    'background-color': '#ABC',
                                    'color': '#CC0000',
                                    'text-align': 'center'
                                });
                            }
                            //显示错误提示信息
                            $("#menuToggleErrorTips").show().children('.tips').html(msg);
                        }
                        //Init
                        this.init(options);
                        this.run();
                    }
            });
        })(jQuery);

        $(function ($) {
            $.fn.extend({
                'menuToggle': function (options) {
                    var self = this;
                    this._default = {

                    }
                }
            })
        })(jQuery)
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="menu-1" class="hide-menu"></div>
        <div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div>

    </form>
</body>
</html>
